<template>
  <section>
    <div class="container">
      <div class="container-title">快递管理</div>
      <div class="container-body pd">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="number"
            label="测试单号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="快递名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="快递代号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="letter"
            label="首字母"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="tel"
            label="电话"
            align="center"
          ></el-table-column>

          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button
                class="btnwarning"
                type="danger"
                size="mini"
                :disabled="scope.row.type === 'JDECLP'"
                @click="Delete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          >
          </el-pagination>
          <div class="clear"></div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      loading: true,
    };
  },
  created() {
    this.GetTbExpressTypeList();
  },
  methods: {
    currentPage(page) {
      this.page = page;
      this.GetTbExpressTypeList(this.searchForm);
    },
    async GetTbExpressTypeList(searchForm) {
      this.loading = true;
      let skip = (this.page - 1) * 10;
      // 请求案例
      let res = await this.$store.dispatch("GetTbExpressTypeList", {
        skip,
      });
      if (res.success) {
        this.tableData = res.data.itmes || [];
        this.total = res.data.totalCount;
      } else {
        this.$message.error(res.errorMessage || "网络异常");
      }
      this.loading = false;
    },

    async handleDelete(index, row) {
      let res = await this.$store.dispatch("DeleteTbExpressType", {
        id: row.id,
      });
      if (res.success) {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.GetTbExpressTypeList(this.searchForm);
      } else {
        this.$message.error(res.errorMessage || "网络异常");
      }
    },

    Delete(index, row) {
      this.$confirm("此操作将永久删除快递信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handleDelete(index, row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/varibles.scss";
.btn {
  margin-bottom: $btnHeight;
  color: $btnwarning;
}
.btnwarning {
  color: $btnwarning;
}
</style>

